<template>
  <div>
    <div class="backmain">
      <div class="backAllhead">
        <div class="backimg" @click="backHome">
          <div style="width: 30px; " class="backliimg">
            <img :src="userinfo.usericon" width="100%" style="border-radius: 50%;"/>
          </div>
          <div>{{ userNameInfo }}</div>
        </div>
        <div class="backimg" @click="toPointDetail" >
          <div style="width: 20px">
            <img src="../../../assets/img5.png" width="100%" />
          </div>
          <div>
            积分<span style="color: orange">{{ userinfo.nowPoints }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "header",
  data() {
    return {
      userNameInfo: "",
      userinfo: {},
    };
  },
  mounted() {
    this.topHeader();
  },
  methods: {
    topHeader() {
      request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        console.log(response.user);
        this.userinfo = response.user;
        if (response.user.truename != null) {
          this.userNameInfo = response.user.truename;
        } else {
          this.userNameInfo = response.user.username;
        }
      });
    },
    backHome(){
        this.$router.push({ name: "index" });
    },
	toPointDetail(){
		this.$router.push({
			name: "IntegralRecord"
		});
	}
  },
};
</script>

<style>
.backmain {
  background-color: #f1f1f0;
  width: 100%;
  padding: 10px 0;
}
.backAllhead {
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 30px;
  margin: 0 auto;
}
.backimg {
  display: flex;
  align-items: center;
  /* border: 1px solid red; */
}
.backimg div {
  margin-right: 10px;
}
</style>